<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>AI问诊 - 智能医疗系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.5/axios.min.js"></script>
    <style>
        .chat-container { height: 60vh; overflow-y: auto; border: 1px solid #ddd; }
        .bot-bubble { background: #f1f1f1; }
        .user-bubble { background: #007bff; color: white; }
    </style>
</head>
<body>
<div id="app" class="container mt-5">
    <h2 class="text-center mb-4">AI智能问诊</h2>

    <div class="chat-container p-3 mb-3">
        <div v-for="(msg, index) in messages" :key="index"
             :class="['p-3 mb-2 rounded', msg.role === 'user' ? 'user-bubble' : 'bot-bubble']">
            {{ msg.content }}
        </div>
    </div>

    <div class="input-group">
        <input type="text" v-model="inputMessage" @keyup.enter="sendMessage"
               class="form-control" placeholder="描述您的症状...">
        <button @click="sendMessage" class="btn btn-primary">发送</button>
    </div>

    <div class="mt-3">
        <a href="../templates/index.html" class="btn btn-secondary">返回首页</a>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            messages: [],
            inputMessage: ''
        },
        methods: {
            sendMessage() {
                if (!this.inputMessage.trim()) return;

                // 添加用户消息
                this.messages.push({
                    role: 'user',
                    content: this.inputMessage
                });

                // 模拟AI回复
                axios.post('/api/ai-chat', { message: this.inputMessage })
                    .then(response => {
                        this.messages.push({
                            role: 'assistant',
                            content: response.data.reply
                        });
                    })
                    .catch(() => {
                        this.messages.push({
                            role: 'assistant',
                            content: '暂时无法连接AI服务，请稍后再试'
                        });
                    });

                this.inputMessage = '';
            }
        }
    });
</script>
</body>
</html>